<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../rest.css">
    <style>
        .wrap {
            margin: 50px auto;
            border: 1px black solid;
            width: 800px;
        }

        .top {
            background: aqua;
            border: 1px gray solid;
            width: 100%;
            height: 300px;
            position: relative;
        }

        .top img {
            width: 100%;
            height: 100%;
        }

        .top .boxC {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .top .boxB {

            background: rgba(255, 255, 255, 1);
        }

        .top .boxA {
            overflow: hidden;
            z-index: 30;
        }

        .top .boxA img {
            width: 800px;
            height: 300px;
            position: absolute;
        }

        .bottom {
            background: aquamarine;
            width: 100%;
            height: 100px;
            margin-top: 50px;
            position: relative;
            border-radius: 100px;
        }

        .box {
            background: yellow;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="top">
            <img src="./1.png" alt="">
            <div class="boxA boxC"><img src="./1.png" alt=""></div>
            <div class="boxB boxC"></div>
        </div>
        <div class="bottom">
            <div class="box"></div>
        </div>
    </div>
</body>
<script>
    var box = document.getElementsByClassName('box')[0]
    var bottom = document.getElementsByClassName('bottom')[0]
    var topBox = document.getElementsByClassName('top')[0]
    var boxA = document.getElementsByClassName('boxA')[0]
    var boxB = document.getElementsByClassName('boxB')[0]
    var img = document.querySelector('.top .boxA img')

    var maxChaX = bottom.clientWidth - box.clientWidth
    //开局随机生成位置
    randomPos()

    box.onmousedown = function (e) {
        var e = e || window.event
        var oriX = e.pageX - box.offsetLeft
        document.onmousemove = function (e) {
            var e = e || window.event
            var chaX = e.pageX - oriX
            chaX = Math.min(Math.max(chaX, 0), maxChaX)
            box.style.left = chaX + 'px'
            boxA.style.left = chaX + 'px'

        }
        document.onmouseup = function (e) {
            var chaX = e.pageX - oriX
            var randX = boxB.offsetLeft
            if (boxA.offsetLeft) {
                if (chaX <= randX + 2 && chaX >= randX - 2) {
                    boxA.style.left = randX + 'px'
                    location.href = 'http://www.baidu.com'
                } else {
                    randomPos()
                }

            }
            document.onmousemove = null
            box.style.left = 0
        }
    }


    //随机生成位置A跟着B的Y值
    function randomPos() {
        var randX = 200 + Math.round(Math.random() * (maxChaX - 200))
        var randY = Math.round(Math.random() * (topBox.clientHeight - box.clientHeight))
        boxB.style.left = randX + 'px'
        boxB.style.top = randY + 'px'
        boxA.style.top = randY + 'px'
        boxA.style.left = 0
        img.style.left = -randX + 'px'
        img.style.top = -randY + 'px'
    }

</script>

</html>